<template>
	<div class="block bg-white " style="width:72%;margin:0 auto;">
				<div class="grid-content bg-white" >
					
						
					<el-container>
						<el-header>
					<div class="d-flex ai-center">
						<h1 style="margin-left: 0.5rem;">资料下载</h1>
					</div>
					</el-header>
					<el-divider/>
					
					<el-main>
						
						<el-input style="width: 10rem;margin-left: auto;margin-right: 0.3rem;"
							v-model="search" @input="changeSearch"
							size="mini" clearable @clear="afterClear"
							placeholder="输入关键字搜索"/>
						<el-table  ref="filterTable"
						:data="previewList.slice((currentPage - 1) * pagesize,currentPage * pagesize)"
						style="width: 100%">
						<el-table-column
						label="文件名"
						prop="name">
						</el-table-column>
						<el-table-column
						label="文件类型" :filters="[{ text: '视频', value: '视频' }, { text: '文档', value: '文档' }]"
						:filter-method="filterType" filter-placement="bottom-end"
						prop="type">
						<template slot-scope="scope">
						<el-tag>{{scope.row.type}}</el-tag></template>
						</el-table-column>
						<el-table-column
						prop="url"
						align="right">
						<template slot-scope="scope">
							<el-button
							size="mini"
							@click="show(scope.row.url,scope.row.type)">预览</el-button>
							<el-button
							size="mini"
							type="primary"
							@click="handleDownload(scope.row.url,scope.row.name)">下载</el-button>
							</template>
							</el-table-column>
						</el-table>
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page.sync="currentPage"
							:page-size="pagesize"
							layout="prev, pager, next, jumper"
							:total="previewList.length">
						</el-pagination>
					</el-main>
					
					</el-container>
				</div>

				<el-drawer size="70%"
					title="内容预览"
					:visible.sync="dialogVisible">
					<video-player v-if="fileType==='视频'"
						class="video-player vjs-custom-skin"
						ref="videoPlayer"
						:playsinline="true"
						:options="playerOptions"
					></video-player>
					<iframe v-if="fileType==='文档'" :src="fileUrl"  width="100%" height="100%" border="0"/>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</el-drawer>
	</div>
</template>

<script>
// require styles
	import 'video.js/dist/video-js.css'
	import 'vue-video-player/src/custom-theme.css'
	import {videoPlayer} from 'vue-video-player'
	export default {
		components: {
			videoPlayer
		},
		data() {
			return {
				articles: [],
				contests: [],
				achievement: [],
				preview: [],
				previewList: [],
				dialogVisible: false,
				playerOptions: {
					// videojs options
					muted: true,
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					playbackRates: [0.75, 1.0, 1.25, 1.5, 2.0],
					sources: [{
						type: "video/mp4",
						src: ''
					}],
					poster: "/static/images/author.jpg",
					notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true, // 当前时间和持续时间的分隔符
						durationDisplay: true, // 显示持续时间
						remainingTimeDisplay: false, // 是否显示剩余时间功能
						fullscreenToggle: true // 是否显示全屏按钮
					}
				},
				fileType:'',
				currentPage:1,
				pagesize:10,
				search:'',
				fileUrl:''
			}
		},
		methods: {
			async fetch() {
				const res1 = await this.$http.get(`rest/article`)
				const res2 = await this.$http.get(`rest/contest`)
				const res3 = await this.$http.get(`rest/achievement`)
				this.articles = res1.data
				this.contests = res2.data
				this.achievement = res3.data
				for(var i=0;i<this.achievement.length;i++){
						console.log(this.achievement[i].files)

					for(var j=0;j<this.achievement[i].videos.length;j++){
					if(this.achievement[i].videos){
							let index = this.achievement[i].videos[j]//字符分割
							this.previewList.push(
								{"name":this.achievement[i].name+'-'+index.name.split(".")[0]+"视频","url":index.url,"type":"视频"})
						}
					if(this.achievement[i].files){
							let index = this.achievement[i].files[j]//字符分割
							this.previewList.push(
								{"name":this.achievement[i].name+'-'+index.name.split(".")[0]+"文档","url":index.url,"type":"文档"})
						}
					}
				}
				console.log(this.previewList)
			},

			handleChange(val) {
				console.log(val);
			},
			
			show(url,fileType){
				this.dialogVisible = true
				switch(fileType){
					case '视频':
						this.playerOptions['sources'][0]['src'] = url; //动态更改流地址 
						this.fileType = fileType
						break
					case '文档':
						this.fileUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
						this.fileType = fileType
						break
					default:
						break
				}
				
			},

			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDownload(url,fileName) {
				let a = document.createElement('a')
                a.href = url
				a.download = fileName
                a.target = '_blank'//在新窗口打开
                a.click();
			},

			filterType(value, row) {
				console.log(row.type)
				return row.type === value;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			changeSearch(){
				this.$forceUpdate()
				this.previewList = this.previewList.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()))
				console.log(this.search)
				console.log(this.previewList)
			},
			afterClear(){
				this.previewList = []
				this.fetch()
			}
			},
		created() {
			this.fetch()
		},
		mounted() {
			
		}
	}
</script>

<style>
	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.el-aside{
		background-color:#fafafa;
	}

  .el-header, .el-footer {
    background-color: white;
    color: #333;
    line-height: 60px;
  }

  .my-autocomplete {
	li {
    line-height: normal;
    padding: 7px;
	}
    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  
}
</style>
